使用 Apache ECharts 可视化 Neo4j 图数据 |
您所在的位置：网站首页 › django neo4j › 使用 Apache ECharts 可视化 Neo4j 图数据 |
使用 Apache ECharts 可视化 Neo4j 图数据
|
目录
什么是 ECharts如何使用 ECharts（及前端可视化工具）全栈系统架构ECharts 入门
ECharts 关系图配置数据一览全栈应用一览准备数据提供API前端调用API更多定制继续探索
除了使用 Neo4j Browser 和 Neo4j Bloom 来展示 Neo4j 的查询结果以外，还有很多第三方的可视化工具能够用来展示图数据。今天给大家简单演示在 Apache ECharts 中展示 Neo4j 数据库中的数据。 什么是 EChartsECharts 是 Apache 的一个开源项目，由百度主导开发并捐献给 Apache 开源软件基金会。ECharts 是一个基于 JavaScript 的开源可视化图表库。 ECharts 除了提供常规的折线图、柱状图、饼图等等，今天我们重点来看看提供的关系图。在示例网站上可以看到有如下的例子：
使用JavaScript实现的可视化工具的应用非常广泛，因为它们几乎都能适应网页端和移动端，甚至能够通过嵌入方式整合进原生客户端应用程序里。 全栈系统架构在正式开始之前，我们先一起看看这类可视化工具在我们整个软件系统里所处的位置，如果你是新手或者没有全栈的经验，也可以从下图中了解一下系统架构。
当用户需要看到我们的可视化图表时，用户需要通过浏览器来访问我们的前端网页。ECharts就是运行在前端网页里的一个可视化框架。 我们知道“数据可视化”是一个完整的词，可视化的就是数据，ECharts需要指定格式的数据来展示直观的图表，这些数据就是由后端的API层来提供。 后端API可以看作是通过业务逻辑层的处理，业务数据我们就存储在数据库层，比如Neo4j的数据库实例中。 所以我们要做一个可视化的应用时，你需要知道这整个流程，即使这一条线可能由不同的团队来具体实现，你也能够更好地与不同团队沟通交流。 ECharts 入门ECharts是以JS库的方式分发，我们只需要在前端页面中引入js文件就准备好了： DOCTYPE html>然后在页面中创建一个占位的节点用来展示 ECharts 图表： 接下来就可以配置 ECharts 如何展示和如何使用数据，就能看到图表了： // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);可以看到，具体的数据使用series来存储，然后将整个option赋给ECharts实例，就能够按照配置显示对应的图表了。这部分可以从 ECharts 官方文档中找到详细的介绍。 接下来我们就详细看看今天的关系图例子吧。 ECharts 关系图配置我们从官网的示例来学习如何准备关系图的数据。
打开示例后就能看到如图的编辑器，我们通过编辑左边的JS代码，就能实时看到展示效果。此时建议用少量数据来熟悉ECharts所要求的格式。上图用到的代码如下： option = { series: [ { type: 'graph', layout: 'force', roam: true, data: [ { "name": "The Matrix" }, { "name": "Carrie-Anne Moss" }, { "name": "Emil Eifrem" } ], links: [ { "source": 1, "target": 0 }, { "source": 2, "target": 0 } ], categories: [] } ] }; myChart.setOption(option);如果你想知道每一项的含义，可以访问ECharts官网的文档》配置项手册进行详细了解。 要展示关系图，需要设置type为graph，然后有两个重要的配置项：data（或nodes）和links（或edges），以及categories用来表示不同类别的节点。 另外我们还能过看到节点的数据项包含name属性，links的数据项使用source和target来表示关系的方向。 那么，Neo4j查询出来的数据如何转换成这种格式呢？ 数据一览我们使用电影数据集为例，在Neo4j中使用这个查询： MATCH path=(m:Movie) m.Name == movie.Name)) nodes.Add(movie); foreach (var actorName in record["cast"].As()){ var actor = new EChartsNode{Name=actorName, Value=1, Category=1}; var actorIndex = nodes.IndexOf(actor); actorIndex = actorIndex == -1 ? nodes.Count : actorIndex; if(!nodes.Exists(a => a.Name == actor.Name)) nodes.Add(actor); links.Add(new EChartsLink{Source=actorIndex, Target=movieIndex}); } } return new EChartsGraph(nodes, links, categories); }); } finally { await session.CloseAsync(); } }这部分代码有精简，具体逻辑是通过Driver连接Neo4j数据库，然后在transaction中运行Cypher语句，再解析Cypher结果，这里我建立了一个EChartsGraph的类，用来表示需要封装的数据，里面有EChartsNode，EChartsLink用来表示节点和关系。 然后的逻辑是将数据封装到nodes和links集合中，注意集合中不能有重复的name，所以需要做一些检查。 提供API在数据处理层完成了代码，我们就可以在API层通过Web API提供REST接口给ECharts用了，API层的代码如下： [Route("/echarts")] [HttpGet] public async Task FetchEChartsGraph([FromQuery(Name = "limit")] int limit = 100) { return await _movieRepository.FetchEChartsGraph(limit); }代码中_movieRepository就是数据层Repository的实例，直接调用获取数据的方法即可。 前端调用API按照之前的配置，前端ECharts只是读取了固定的数据，我们需要在前端调用REST API，这样我们就能实现真实数据的展示了。 此时的ECharts配置如下： var myChart = echarts.init(document.getElementById("echarts")); myChart.showLoading(); $.get("/echarts").done(function(graph){ myChart.hideLoading(); option = { legend: { data: ['Movie', 'Person'] }, series: [ { type: 'graph', layout: 'force', animation: true, draggable: true, roam: true, selectedMode: true, lineStyle: { curveness: 0 }, emphasis: { focus: 'adjacency', lineStyle: { width: 5 } }, force: { repulsion: 50 }, nodes: graph.nodes, links: graph.links, categories: graph.categories } ] }; myChart.setOption(option); })这里我使用了另一个JS框架jQuery，提供了很简单的方式调用Web API。 然后将服务端的数据传给nodes和links，这样就完成了真实数据的对接。
是不是就有点感觉了？ 更多定制通过查看文档，我们可以看到通过symbolSize可以指定节点的大小，这里我们可以使用某个电影关联的人物数量来表示大小。 我们还可以去掉Cypher查询里的限制条件，返回更多的数据。 我这里最终使用的Cypher如下： MATCH path=(m:Movie) |
【本文地址】